<template>
    <a-config-provider :locale="zh_CN">
        <main-layout>
            <template #leftNav>
                <div class="left-nav-container">
                    <div v-if="collapsed" class="left-logo">R</div>
                    <div v-else class="left-logo">
                        <img class="logo-img" src="./common-lib/assets/images/robot_nav_logo.png" />
                        <span>ROBOT</span>
                    </div>
                    <!--  菜单显示  -->
                    <div>
                        <nav-menu class="nav-menu" :routes="menuList"></nav-menu>
                    </div>
                </div>
            </template>
            <!--  顶部  -->
            <template #customHeader>
                <header-bar></header-bar>
            </template>
            <!--  内容区域  -->
            <template #contentArea>
                <router-view v-slot="{ Component }">
                    <transition name="fade" mode="out-in">
                        <keep-alive :include="keepAliveList">
                            <component :is="Component"></component>
                        </keep-alive>
                    </transition>
                </router-view>
            </template>
        </main-layout>
        <!--   全局loading效果  -->
        <div v-if="showPageLoading" class="global-loading">
            <loading></loading>
        </div>
    </a-config-provider>
</template>

<script lang="ts" setup>
import navMenu from 'lib-comp/navMenu/navMenu.vue'
import HeaderBar from 'lib-comp/headerBar/headerBar.vue'
import MainLayout from 'lib-comp/layout/mainLayout.vue'
import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN'
import moment from 'moment'
import { computed, onMounted, ComputedRef } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import Loading from 'lib-comp/loading/loading.vue'
const configJson = require('../package.json')

// 引入moment
moment.locale('zh-cn') //配置moment中文环境
const route = useRoute()
const store = useStore()

const collapsed = computed(() => {
    return store.state.common.collapsed
})

const showPageLoading = computed(() => {
    return store.state.common.showPageLoading
})

// 展开
const unFold = () => {
    store.commit('setCommonStore', {
        collapsed: false
    })
}
// 折叠
const fold = () => {
    store.commit('setCommonStore', {
        collapsed: true
    })
}

const keepAliveList = computed(() => {
    return store.state.common.includesRouters
})

// 菜单列表数据
const menuList: ComputedRef = computed(() => {
    return store.state.common.menuList.filter(item => item.appInfo.baseUrl === configJson.appBaseUrl)
})

const currentAppId = computed(() => {
    return store.state.common.currentAppId
})

const styleNav: ComputedRef = computed(() => {
    return {
        'justify-content': collapsed.value ? 'center' : 'start',
        'margin-left': collapsed.value ? '24px' : '40px'
    }
})
const appSelect = (item) => {
    store.commit('setCommonStore', {
        currentAppId: item ? item.id : ''
    })
}
// 子应用加载
onMounted(() => {
    store.commit('setCommonStore', {
        isRefreshPage: true
    })
})
</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
</style>
<style lang="less" scoped>
.left-logo {
    height: 80px;
    background: var(--themeBackColor);
    color: var(--themeColor);
    box-sizing: content-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 1000;
    .logo-img {
        height: 30px;
        margin-right: 10px;
    }
}

.app-list {
    position: fixed;
    display: inline-block;
    background: #ffffff;
    top: 80px;
    left: 0;
    height: calc(100vh - 160px);
    width: 36px;
    border: 1px 1px 1px 0 solid #eae9e9;
    border-radius: 0 4px 4px 0;
    box-shadow: 0 0 6px 6px #fafafa;
    margin-right: 2px;
    text-align: center;
    .app-list-item {
        padding: 10px 0;
        border-radius: 0 4px 4px 0;
        cursor: pointer;
        .app-name {
            writing-mode: vertical-lr;
            width: 20px;
            text-align: center;
            margin-left: 6px;
        }
    }
    .app-list-item-select {
        background: @theme-bac-color;
        color: #fafafa;
    }
}

.app-nav-item {
    display: flex;
    align-items: center;
    color: var(--themeColor);
    height: 40px;
    border-radius: 5px;
    .app-name {
    }
}
.nav-menu {
    margin-left: 24px;
    width: 210px;
}

.wave-common {
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.wave-dot {
    position: relative;
    width: 30px;
    height: 40px;
    line-height: 40px;
    .dot {
        position: absolute;
        width: 10px;
        height: 10px;
        border: 2px solid var(--themeColor);
        z-index: 2;
        .wave-common();
    }
    /* 产生动画（向外扩散变大）的圆圈  */
    .wave-one {
        position: absolute;
        width: 25px;
        height: 25px;
        .wave-common();
        z-index: 1;
        opacity: 0;
        animation: warn 2s ease-out;
        animation-iteration-count: infinite;
        box-shadow: 1px 1px 40px var(--themeColor);
    }
    .wave-two {
        position: absolute;
        width: 25px;
        height: 25px;
        border: 6px solid var(--themeColor);
        .wave-common();
        z-index: 1;
        opacity: 0;
        animation: warn1 2s ease-out;
        animation-iteration-count: infinite;
        box-shadow: 1px 1px 30px var(--themeColor);
    }
}

@keyframes warn {
    0% {
        transform: scale(0.3);
        -webkit-transform: scale(0.3);
        opacity: 0;
    }
    25% {
        transform: scale(0.3);
        -webkit-transform: scale(0.3);
        opacity: 0.1;
    }
    50% {
        transform: scale(0.5);
        -webkit-transform: scale(0.5);
        opacity: 0.3;
    }
    75% {
        transform: scale(0.8);
        -webkit-transform: scale(0.8);
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 0;
    }
}
@keyframes warn1 {
    0% {
        transform: scale(0.3);
        -webkit-transform: scale(0.3);
        opacity: 0;
    }
    25% {
        transform: scale(0.3);
        -webkit-transform: scale(0.3);
        opacity: 0.1;
    }
    50% {
        transform: scale(0.3);
        -webkit-transform: scale(0.3);
        opacity: 0.3;
    }
    75% {
        transform: scale(0.5);
        -webkit-transform: scale(0.5);
        opacity: 0.5;
    }
    100% {
        transform: scale(0.8);
        -webkit-transform: scale(0.8);
        opacity: 0;
    }
}
@-webkit-keyframes warn {
    0% {
        transform: scale(0);
        -webkit-transform: scale(0);
        opacity: 0;
    }
    25% {
        transform: scale(0);
        -webkit-transform: scale(0);
        opacity: 0.1;
    }
    50% {
        transform: scale(0.1);
        -webkit-transform: scale(0.1);
        opacity: 0.3;
    }
    75% {
        transform: scale(0.5);
        -webkit-transform: scale(0.5);
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 0;
    }
}

.global-loading {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10000;
}
</style>
